<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影详情页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/base.css">
		<style>
			.banner {
				background-color: #4a4a4a;
				height: 8rem;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.banner img {
				width: 4rem;
				height: 7rem;
			}

			.mui-card {
				box-shadow: none;
				margin-bottom: 0;
			}

			.mui-card-header:after {
				height: 0;
			}

			.mui-card-content-inner {
				padding-top: 0;
				padding-bottom: 0;
			}

			.mui-card-content-inner p {
				border-bottom: 1px solid #8F8F94;
				padding-bottom: 10px;
			}

			.cart-mid-title {
				padding: 0 15px;
			}

			.cart-mid-desc {
				width: 85%;
			}

			.cart-bottom-desc {
				display: flex;
				justify-content: space-between;
			}

			.actor-item {
				width: 23%;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.actor-item img {
				height: 2.4rem;
			}

			/* 评论 */
			.comment{
				margin-top: 30px;
			}
			.comment-title {
				background-color: #ddd;
				text-align: center;
				height: 1.2rem;
				line-height: 1.2rem;
			}

			.comment-content {
				margin: 10px 0 10px 25px;
				padding-right: 15px;
			}
.comment-item{
	border-bottom: 1px solid #ddd;
	padding-top: 10px;
	padding-bottom: 20px;
}
			.comment-item .item-t {
				line-height: .8rem;
			}

			.comment-item .item-t::after {
				display: block;
				content: '';
				height: 0;
				visibility: hidden;
				clear: both;
			}

			.comment-item .item-t img {
				height: .8rem;
				width: .8rem;
				border-radius: 50%;
				float: left;
			}

			.comment-item .item-t .nickname {
				float: left;
				margin-left: .3rem;
				color: #000000;
				font-size: .32rem;
			}

			.comment-item .item-t .time {
				float: right;
			}

			.comment-item .item-b {
				margin-left: 1.1rem;
			}
		</style>
	</head>
	<body>
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">电影</h1>
		</header>
		<!-- 内容主容器 -->
		<div class="mui-content">
			<div class="banner">
				<img src="../images/movie.jpg" alt="">
			</div>
			<div class="mui-card">
				<div class="mui-card-header cart-top-title">1917</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>2019 / 美国，英国，印度，西班牙，加拿大，中国大陆/剧情。战争.
							萨姆.门德斯导演作品</p>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header cart-mid-title">
					<p>剧情简介</p>
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner cart-mid-desc">
						1917年，第一次世界大战进入最激烈之际，
						两个年仅16岁的英国士兵接到的命令，需立即赶往是往前线，向
						那里的将军传达一个“立即停止进攻”讯息。时间只有八小时。。
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header cart-bottom-title">
					<p>演员</p>
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner cart-bottom-desc">
						<div class="actor-item">
							<img src="../images/actor.jpg">
							<div class="desc">玛克尔杰克逊</div>
						</div>
						<div class="actor-item">
							<img src="../images/actor.jpg">
							<div class="desc">玛克尔杰克逊</div>
						</div>
						<div class="actor-item">
							<img src="../images/actor.jpg">
							<div class="desc">玛克尔杰克逊</div>
						</div>
						<div class="actor-item">
							<img src="../images/actor.jpg">
							<div class="desc">玛克尔杰克逊</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 评论 -->
		<div class="comment">
			<div class="comment-title">
				评论
			</div>
			<div class="comment-content">
				<div class="comment-item">
					<div class="item-t">
						<img src="../images/actor.jpg" alt="">
						<p class="nickname">昵称</p>
						<p class="time">2018-1-31</p>
					</div>
					<div class="item-b">
						我是评论的内容我是评论的内容我是评论的内容
					</div>
				</div>
				<div class="comment-item">
					<div class="item-t">
						<img src="../images/actor.jpg" alt="">
						<p class="nickname">昵称</p>
						<p class="time">2018-1-31</p>
					</div>
					<div class="item-b">
						我是评论的内容我是评论的内容我是评论的内容
					</div>
				</div>
				<div class="comment-item">
					<div class="item-t">
						<img src="../images/actor.jpg" alt="">
						<p class="nickname">昵称</p>
						<p class="time">2018-1-31</p>
					</div>
					<div class="item-b">
						我是评论的内容我是评论的内容我是评论的内容
					</div>
				</div>
			</div>
		</div>

	</body>
</html>
